"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { BarChart3, BookOpen, Calendar, GraduationCap, History, Home, Settings, Users } from "lucide-react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

const sidebarItems = [
  {
    title: "实时监控",
    href: "/",
    icon: Home,
  },
  {
    title: "课表安排",
    href: "/schedule",
    icon: Calendar,
  },
  {
    title: "班级分析",
    href: "/analytics",
    icon: BarChart3,
  },
  {
    title: "历史记录",
    href: "/history",
    icon: History,
  },
  {
    title: "教学资源",
    href: "/resources",
    icon: GraduationCap,
  },
  {
    title: "系统设置",
    href: "/settings",
    icon: Settings,
  },
]

export function Sidebar() {
  const pathname = usePathname()

  return (
    <div className="hidden border-r bg-background md:block md:w-64">
      <div className="flex h-full flex-col gap-2 p-4">
        <div className="flex h-12 items-center border-b px-4">
          <Link href="/" className="flex items-center gap-2 font-semibold">
            大学课堂实时监测系统
          </Link>
        </div>
        <nav className="grid gap-1 px-2 pt-2">
          {sidebarItems.map((item) => (
            <Button
              key={item.href}
              variant={pathname === item.href ? "secondary" : "ghost"}
              className={cn(
                "flex h-10 items-center justify-start gap-2 px-4",
                pathname === item.href && "bg-secondary",
              )}
              asChild
            >
              <Link href={item.href}>
                <item.icon className="h-4 w-4" />
                {item.title}
              </Link>
            </Button>
          ))}
        </nav>
      </div>
    </div>
  )
}
